<template>
  <div class="container">
    <el-dialog
      :title="dialog.dialogType==='edit'?'修改供应商':'创建供应商'"
      :visible.sync="dialog.centerDialogVisible"
      center
      :lock-scroll="true"
      width="60%"
      top="2vh"
      @closed="hideDialog"
      @open="getData"
    >
      <div class="main">
        <el-form
          ref="form"
          :rules="rules"
          :model="formData"
          label-width="150px"
          label-position="left"
          class="form"
        >
          <el-form-item label="经营方式：">
            <el-select v-model="formData.mode" placeholder="请选择经营方式">
              <el-option
                v-for="(item,index) in formData.modeList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账期方式：">
            <el-input v-model="formData.payment_type" placeholder="请输入结算方式" />
          </el-form-item>
          <el-form-item label="结算方式：">
            <el-input v-model="formData.payment" placeholder="请输入结算方式" />
          </el-form-item>
          <el-form-item label="供应商名称：">
            <el-input v-model="formData.name" placeholder="请输入供应商名称" />
          </el-form-item>
          <el-form-item label="账期天数：">
            <el-input v-model.number="formData.payment_days" placeholder="请输入账期天数" />
          </el-form-item>
          <el-form-item label="对账账号编码：" prop="operator_code">
            <el-input v-model="formData.operator_code" placeholder="请输入对账账号编码" />
          </el-form-item>
          <el-form-item label="对账账号名称：" prop="operator_name">
            <el-input v-model="formData.operator_name" placeholder="请输入对账账号名称" />
          </el-form-item>
          <el-form-item label="邮编：">
            <el-input v-model="formData.postcode" placeholder="请输入邮编" />
          </el-form-item>
          <el-form-item label="邮箱：">
            <el-input v-model="formData.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="国家：">
            <el-select
              v-model="formData.countryMsg"
              @change="getCountry(formData.countryMsg)"
              placeholder="请选择国家"
            >
              <el-option
                v-for="item in country"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否为现代农业：">
            <el-switch
              v-model="formData.is_agriculture"
               active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </el-form-item>
          <el-form-item
            v-if="formData.country == 0 || formData.country== ''"
            label="地址："
          >
            <el-cascader
              size="large"
              :options="options"
              v-model="selectedOptions"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址：">
            <el-input type="textarea" v-model="formData.address_detail" placeholder="请输入详细地址" />
          </el-form-item>
        </el-form>

        <el-form
          ref="forms"
          :rules="rules"
          :model="formData"
          label-width="150px"
          label-position="left"
          class="form"
        >
          <el-form-item label="状态：">
            <el-select v-model="formData.states" placeholder="请选择状态">
              <el-option
                v-for="(item,index) in formData.statesList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="供应商性质：" prop="property">
            <el-select v-model="formData.property" placeholder="请选择状态">
              <el-option
                v-for="(item,index) in formData.propertyList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="供应商类型：">
            <el-select v-model="formData.type" placeholder="请选择账期方式">
              <el-option
                v-for="(item,index) in formData.typeList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="用友供应商编码:">
            <el-input v-model="formData.yy_code" placeholder="请输入税务登记号" />
          </el-form-item>
          <el-form-item label="税务登记号：">
            <el-input v-model="formData.taxpayer" placeholder="请输入税务登记号" />
          </el-form-item>
          <el-form-item label="联系人：">
            <el-input v-model="formData.contacts" placeholder="请输入联系人" />
          </el-form-item>
          <el-form-item label="电话：">
            <el-input v-model="formData.tel" placeholder="请输入电话" />
          </el-form-item>
          <el-form-item label="传真：">
            <el-input v-model="formData.fax" placeholder="请输入传值" />
          </el-form-item>
          <el-form-item label="手机：">
            <el-input v-model="formData.mobile" placeholder="请输入手机" />
          </el-form-item>
          <el-form-item label="开户人姓名：">
            <el-input v-model="formData.bank_acount_person_name" placeholder="请输入开户人姓名" />
          </el-form-item>
          <el-form-item label="开户行：">
            <el-input v-model="formData.bank" placeholder="请输入开户行" />
          </el-form-item>
          <el-form-item label="账号：">
            <el-input v-model="formData.bank_acount" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="备注：">
            <el-input v-model="formData.remarks" type="textarea" placeholder="请输入备注" />
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import {
  addSupplier,
  editSupplier,
  getSupplierInfo
} from "@/api/supplier/supplierList";
export default {
  props: {
    dialog: Object
  },
  data() {
    return {
      rules: {
        name: [{ required: true, message: "填写供应商名称", trigger: "blur" }],
        mode: [{ required: true, message: "填写经营方式", trigger: "blur" }],
        payment: [{ required: true, message: "填写结算方式", trigger: "blur" }],
        payment_type: [
          { required: true, message: "填写账期方式", trigger: "blur" }
        ],
        payment_days: [
          { required: true, message: "填写账期天数", trigger: "blur" },
          { type: "number", message: "账期天数必须为数字" }
        ],
        states: [{ required: true, message: "填写状态", trigger: "blur" }],
        type: [{ required: true, message: "填写供应商类型", trigger: "change" }],
        property: [
          { required: true, message: "填写供应商性质 ", trigger: "change" }
        ],
        yy_code: [{ required: true, message: "填写用友供应商编码", trigger: "blur" }],
        contacts: [{ required: true, message: "填写联系人", trigger: "blur" }],
        tel: [{ required: true, message: "填写电话号", trigger: "blur" }],
        mobile: [{ required: true, message: "填写手机号", trigger: "blur" }],
        email: [
          { required: true, message: "填写邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur"]
          }
        ],
        country: [{ required: true, message: "填写国家", trigger: "blur" }],
        address: [{ required: true, message: "选择地址", trigger: "blur" }],
        address_detail: [
          { required: true, message: "详细地址", trigger: "blur" }
        ],
        bank_acount_person_name: [
          { required: true, message: "填写银行开户人", trigger: "blur" }
        ],
        bank: [{ required: true, message: "填写开户行", trigger: "blur" }],
        bank_acount: [
          { required: true, message: "填写银行账号", trigger: "blur" }
        ],
        taxpayer: [
          { required: true, message: "填写税务登记号", trigger: "blur" }
        ],
        // remarks: [{ required: true, message: "填写备注", trigger: "blur" }],
        operator_code: [
          { required: true, message: "填写对账账号编码", trigger: "blur" }
        ],
        operator_name: [
          { required: true, message: "填写对账账号名称", trigger: "blur" }
        ]
      },
      country: [
        {
          label: "中国",
          value: 0
        },
        {
          label: "国外",
          value: 1
        }
      ],
      options: regionData,
      selectedOptions: [],
      formData: {
        // modeList: ["经销", "代销", "联营", "合营", "租赁", "扣率代销"],
        modeList: ["公司", "个体"],
        statesList: ["正常", "停用", "冻结业务", "冻结账款"],
        typeList: [
          "产地供应商",
          "生产厂家",
          "批发市场",
          "种植基地",
          "门店自采",
          "其他"
        ],
        propertyList: ["国有", "民营", "合资", "外资", "个体"],
        is_agriculture: false,
        property: "",
        name: "",
        payment: "",
        type: "",
        payment_type: "",
        payment_days: "",
        states: "",
        mode: "",
        contacts: "",
        tel: "",
        fax: "",
        mobile: "",
        postcode: "",
        email: "",
        bank_acount_person_name: "",
        bank: "",
        bank_acount: "",
        taxpayer: "",
        remarks: "",
        operator_code: "",
        operator_name: "",
        address: [],
        address_detail: "",
        country: "",
        countryMsg: "",
        yy_code:''
      }
    };
  },
  methods: {
    getData() {
      this.selectedOptions = [];
      let data = {
        id: this.dialog.id
      };
      if (this.dialog.dialogType === "edit") {
        getSupplierInfo(data).then(res => {
          if (res.code == 0) {
            res.data.modeList = ["公司", "个体"];
            res.data.statesList = ["正常", "停用", "冻结业务", "冻结账款"];
            res.data.typeList = [
              "产地供应商",
              "生产厂家",
              "批发市场",
              "种植基地",
              "门店自采",
              "其他"
            ];
            res.data.propertyList = ["国有", "民营", "合资", "外资", "个体"];
            res.data.countryMsg = res.data.country == 0 ? "中国" : "国外";
            if  (res.data.address && res.data.address != 'null') {
              let addressList = JSON.parse(res.data.address);
              addressList.forEach(data => {
                this.selectedOptions.push(data.code);
              });
            }
            res.data.is_agriculture =
              res.data.is_agriculture == 1 ? true : false;
            res.data.address = JSON.parse(res.data.address);
            this.formData = res.data;
          }
        });
      }
    },
    //选取国家
    getCountry(val) {
      this.formData.country = val;
      this.selectedOptions = [];
      this.formData.address = [];
    },
    //获取地址和地址Code
    handleChange(val) {
      this.formData.address = [
        {
          code: val[0],
          name: CodeToText[val[0]]
        },
        {
          code: val[1],
          name: CodeToText[val[1]]
        },
        {
          code: val[2],
          name: CodeToText[val[2]]
        }
      ];
    },
    // 关闭触发的方法
    hideDialog() {
      this.formData = {
        modeList: ["公司", "个体"],
        statesList: ["正常", "停用", "冻结业务", "冻结账款"],
        typeList: [
          "产地供应商",
          "生产厂家",
          "批发市场",
          "种植基地",
          "门店自采",
          "其他"
        ],
        propertyList: ["国有", "民营", "合资", "外资", "个体"],
        property: "",
        name: "",
        payment: "",
        type: "",
        payment_type: "",
        payment_days: "",
        states: "",
        mode: "",
        contacts: "",
        tel: "",
        fax: "",
        mobile: "",
        postcode: "",
        email: "",
        bank_acount_person_name: "",
        bank: "",
        bank_acount: "",
        taxpayer: "",
        remarks: "",
        operator_code: "",
        operator_name: "",
        address: [],
        address_detail: "",
        country: "",
        countryMsg: ""
      };
      this.$refs["form"].resetFields();
      this.$refs["forms"].resetFields();
      this.dialog.centerDialogVisible = false;
    },
    //提交
    confirm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$refs["forms"].validate(valids => {
            if (valids) {
              let data = {
                name: this.formData.name,
                mode: this.formData.mode,
                payment: this.formData.payment,
                payment_type: this.formData.payment_type,
                payment_days: this.formData.payment_days,
                states: this.formData.states,
                type: this.formData.type,
                property: this.formData.property,
                contacts: this.formData.contacts,
                tel: this.formData.tel,
                fax: this.formData.fax,
                mobile: this.formData.mobile,
                postcode: this.formData.postcode,
                email: this.formData.email,
                bank_acount_person_name: this.formData.bank_acount_person_name,
                bank: this.formData.bank,
                bank_acount: this.formData.bank_acount,
                taxpayer: this.formData.taxpayer,
                remarks: this.formData.remarks,
                operator_code: this.formData.operator_code,
                operator_name: this.formData.operator_name,
                country: this.formData.country,
                address: this.formData.address,
                yy_code:this.formData.yy_code,
                address_detail: this.formData.address_detail,
                is_agriculture: this.formData.is_agriculture ? 1 : 0
              };
              if (this.dialog.dialogType === "edit") {
                data.id = this.formData.id;
                editSupplier(data)
                  .then(res => {
                    if (res.code == 0) {
                      this.$message({
                        message: res.message,
                        type: "success"
                      });
                      this.hideDialog();
                      this.$emit("upData");
                    } else {
                      this.$message({
                        message: res.message,
                        type: "error"
                      });
                    }
                  })
                  .catch(err => {
                    console.log(err);
                  });
              } else {
                addSupplier(data)
                  .then(res => {
                    if (res.code == 0) {
                      this.$message({
                        message: res.message,
                        type: "success"
                      });
                      this.hideDialog();
                      this.$emit("upData");
                    } else {
                      this.$message({
                        message: res.message,
                        type: "error"
                      });
                    }
                  })
                  .catch(err => {
                    console.log(err);
                  });
              }
            }
          });
        }
      });
    },
    //取消
    cancel() {
      this.hideDialog();
    }
  }
};
</script>
<style scoped>
.main {
  display: flex;
}
.form {
  width: 50%;
  padding: 0 20px;
  box-sizing: border-box;
}
</style>